<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜单滚动固定</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }



        ul {
            position: relative;
            list-style: none;
            background-color: light;
            width: 1280px;
            min-width: 640px;
            height: 60px;
            margin: 0 auto;
            border-bottom: 1px solid pink;
            box-shadow: 0px 5px 8px pink;
        }



        ul {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: space-around;
            background-color: rgb(247, 108, 108);
            border-radius: 30px;
        }

        ul>li {
            height: 30px;
            width: 200px;
            text-align: center;
            line-height: 30px;
            color: #fafafa;
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 5px;
        }

        h2 {

            text-align: center;
            margin: 50px auto;
            color: #eeeeee;
        }

        .very_height {
            width: 160px;
            height: 1400px;
            margin: 200px auto;
            background-color: pink;
            border-radius: 30px;
        }

        .very_height h2 {
            /* border: 1px solid red; */
            width: 30px;
        }
    </style>
</head>

<body>
    <h2>菜单滚动悬停</h2>

    <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>


    <div class="very_height">
        <h2>我是很高的 有1.5k像素</h2>
        <h2>我是很高的 有1.5k像素</h2>
        <h2>我是很高的 有1.5k像素</h2>
        <h2>我是很高的 有1.5k像素</h2>
    </div>

    <script src="js/jQueryV2.2.4.js"></script>
    <script>
        // 菜单固定
        $(function () {
            //获取要定位元素距离浏览器顶部的距离
            var navMenuHeight = $("ul").offset().top;
            //滚动条事件
            $(window).scroll(function () {
                //获取滚动条的滑动距离
                var scrollHeight = $(this).scrollTop();
                // console.log("看看offsetTop", document.querySelector('ul').offsetTop);
                // console.log("看看scrollTop",  document.querySelector('ul').scrollTop);

                //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定

                var viewWidth = $(window).width();
                var left = (viewWidth - 1280) / 2;
                if (scrollHeight >= navMenuHeight) {
                    $("ul").css({
                        "position": "fixed",
                        "left": left > 0 ? left + "px" : "0",
                        "top": "0"
                    });
                } else if (scrollHeight < navMenuHeight) {
                    $("ul").css({
                        "position": "relative",
                        "left": "0",
                        "top": "0"
                    });
                }
            })
        })
        var ul = document.querySelector('h2');

        new Promise((resolve, reject) => {
            resolve("成功了1");
        }).then(
            (value) => {
                console.log(value);
                return new Promise((resolve,reject) => {
                    // console.log(1)
                })               
            }, (value) => {
                //Promise里面的resolve函数执行后此函数不会执行，此函数是reject被调用后执行
                console.log(value);
            }
        ).then(
            (value) => {
                console.log(value);
                return new Promise((resolve, reject) => {
                    reject("第三步出错，请提供有效地址");
                })
            }, (value) => {
                //Promise里面的resolve函数执行后此函数不会执行，此函数是reject被调用后执行
                console.log(value);
            }
        ).then(
           (value)=> {
               return 0
           }, (value) => {
                //Promise里面的resolve函数执行后此函数不会执行，此函数是reject被调用后执行
                console.log(value);
            }
        ).then(
            (value) => {
                console.log(value);
                return Promise.resolve("成功了5");
            }
        ).then(
            (value) => {
                console.log(value);
                return Promise.resolve("成功了6");
            }
        ).then(
            (value) => {
                console.log(value);
                return new Promise((resolve,reject) => {
                    resolve('支付完成');
                    //reject('支付失败');
                })
            }
        ).then(
            (value) => {
                console.log(value,"欢迎下次光临");
            },
            (value) => {
                console.log(value,"请保证余额充足");
            }
        )
    </script>



</body>

</html>